<template>
  <div class="statistical-main">
    <!-- 面包屑 -->
    <header class="statistical-header">
      <!-- 标题 -->
      <div class="left-title">
        <div class="icon"></div>
        <h3>统计排名</h3>
      </div>
      <div class="right-title">
        <el-tooltip effect="dark" content="返回">
          <el-button @click.stop="handleBack" text>
            <svg class="action-icon" aria-hidden="true" width="18" height="18">
              <use xlink:href="#iconzuojiantou" fill="#409eff" />
            </svg>
          </el-button>
        </el-tooltip>
      </div>
    </header>
    <!-- 内容 -->
    <el-scrollbar class="statistical-body">
      <!-- 热榜Topic -->
      <div class="top-content-title">
        <svg aria-hidden="true" class="title-color-icon">
          <use xlink:href="#icon-zhuanyepaiming" />
        </svg>
        <h4>热榜Topic</h4>
      </div>
      <UserTable></UserTable>

      <!-- 数据总览 -->
      <div class="data-content-title">
        <svg aria-hidden="true" class="title-color-icon">
          <use xlink:href="#icon-zonghefenxi" />
        </svg>
        <h4>数据总览</h4>
      </div>
      <EchartDataTable></EchartDataTable>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { store } from '@/store/issues'
import { storeToRefs } from 'pinia'

import UserTable from './components/UserTable.vue'
import EchartDataTable from './components/EchartDataTable.vue'
import Router from '@/router'
import { IProblems } from '../config/problems'
import { editUserData } from '@/apis/system/userInfo'

const issueStore = store()
const { userList } = storeToRefs(issueStore)

/**
 * @desc: 计算每个用户的综合排名
 * @return {*}
 */
const calculateRank = () => {
  let item = userList.value
  for (let i = 0; i < item.length; i++) {
    let likedNum = 0
    item[i].issues_connect.map((item: IProblems) => {
      likedNum += item.like_id.length
    })
    let sum = likedNum + item[i].completed_issues.length + item[i].issues_connect.length
    let params = {
      id: item[i].id,
      issues_sort_sum: sum
    }
    editUserData(params)
  }
}
calculateRank()

/**
 * @desc: 后退
 */
const handleBack = () => {
  Router.back()
}
</script>

<style lang="less" scoped>
@color: #fdf6ec;

.statistical-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 10px;

  .statistical-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 0;

    .left-title {
      display: flex;
      align-items: center;

      .icon {
        height: 26px;
        width: 6px;
        box-sizing: border-box;
        background: #409eff;
        border-radius: 3px;
        margin-right: 16px;
      }
    }
    .right-title {
      display: flex;
      justify-content: flex-end;
      height: 26px;
      line-height: 26px;
    }
  }
  .statistical-body {
    padding: 20px;
    flex-grow: 1;
    height: 0;
    flex-shrink: 0;
    .top-content-title,
    .data-content-title {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      .title-color-icon {
        padding-right: 5px;
        width: 30px;
        height: 60px;
      }
    }
    .data-content-title {
      .title-color-icon {
        padding-right: 5px;
        width: 25px;
        height: 60px;
      }
    }
  }
}
</style>

function editUserInfo(id: number, params: { issues_sort_sum: number }) {
  throw new Error('Function not implemented.')
}

function editUserInfo(id: number, params: { issues_sort_sum: number }) {
  throw new Error('Function not implemented.')
}
